<template>
    <div class="back">
        <div class="logo_box">
            <!-- 头像区域 -->
            <div class="logo_img">
                <img src="../assets/logo.png">
                
            </div>
        <!-- 登陆表单区域 -->
      <el-form label-width="80px" :rules="rules" ref="logoinFormRef" class="logo_from" :model="ruleForm">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
             <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            
             <el-form-item class="btns">
     <el-button type="primary" @click="logoin">登陆</el-button>
     <el-button type="info" @click="resetlogoinFormRef">重置</el-button>
     </el-form-item>     
        </el-form>
        </div>
        
    </div>
</template>
<script>

export default {
  data() {
    return {
      ruleForm: {
        name: "",
        password:'',
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
         password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
      }
    };
  },
  methods: {
    resetlogoinFormRef(){
    //console.log(this)
   this.$refs.logoinFormRef.resetFields()
    },
    logoin(){
    //console.log(this)  logoinFormRef拿到表单的实列对象
   this.$refs.logoinFormRef.validate(valid=>{
  if(valid==true){
      this.$message({
          message: '恭喜你登陆成功哦',
          type: 'warning'
        });
      this.$router.push('/home')
  }
  else{
     this.$message({
          message: '不好意思，施主你还不满足条件',
          type: 'warning'
        });
  }
   })
    },
  }
};
</script>
<style  scoped>
.back{
background-color:aquamarine;
  height: 100%;
}
.logo_box{
    background: blueviolet;
    width:450px;
    height:300px;
    position: absolute;
  left: 35%;
  top:30%;
  
}
.logo_img{
    margin: auto 15% ;
    padding: 10px;
    position: absolute;
    left:20%;
    top: -10%;
    
}
.logo_img img{
    width: 40%;
    height: 40%;
 border-radius:30%;
 background:white;
 box-shadow: 0 0 20px purple;
}
.btns{
    display:flex;
     justify-content: flex-end;/*弹性盒子右对齐 */
}
.logo_from{
    position: absolute;
    bottom:0px;
    padding:0px 20px;
}
</style>



